﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Gallery.aspx.cs" Inherits="StickDrawing_WebRole.Gallery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Stick Love Gallery</title>
    <meta name="keywords" content="Stick Drawing,Azure,Siverlight,Windows Azure" />
    <meta name="description" content = "Gallery of Stick Love. You can find what are other people drawing nowadays via Stick Love." /> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style type="text/css" media="all">
        BODY
        {
            font-family: Tahoma, sans-serif;
            color: #eeeeee;
            font-size: 11px;
        }
        HTML
        {
            font-family: Tahoma, sans-serif;
            color: #eeeeee;
            font-size: 11px;
        }
        A:link
        {
            color: #ff6600;
        }
        A:active
        {
            color: #ff6600;
        }
        A:visited
        {
            color: #ff6600;
        }
        A:hover
        {
            color: #ffffcc;
        }
        TD
        {
            border-bottom: #999999 1px solid;
            text-align: center;
            border-left: #999999 1px solid;
            width: 20px;
            border-top: #999999 1px solid;
            cursor: pointer;
            border-right: #999999 1px solid;
        }
        .cords
        {
            background-color: #cccccc;
            color: black;
        }
        .target
        {
            background-color: #ffffcc;
        }
        .crosshair
        {
            background-color: #444444;
        }
        .crosshairHighlight
        {
            background-color: #666666;
            font-weight: bold;
        }
        #mytable td
        {
            height: 40px;
            width: 40px;
        }
    </style>
    <link rel="stylesheet" href="style2.css" type="text/css" charset="utf-8" />

    <script type="text/javascript" src="js/mootools.release.64.js"></script>

    <script language="javascript" type="text/javascript">


        // good enhancement to my original script by Inviz, of mootools fame.
        // tweaked a little more by me to have table cell hat is hovered to be highlighted
        // as well as  to not highlight the cords row and columns

        window.onload = function() {
            var table = [];

            $S('#mytable td').action({
                onmouseover: function() {
                    var a = this.id.split('x');
                    for (i = 1; i < 27; i++) {
                        if ($(i + 'x' + a[1]).className != 'cords') {
                            $(i + 'x' + a[1]).className = $(a[0] + 'x' + i).className = 'crosshairHighlight';
                            $(a[0] + 'x' + a[1]).className = 'target';
                        }
                    }


                },
                onmouseout: function() {
                    var a = this.id.split('x');
                    for (i = 1; i < 27; i++) {
                        if ($(i + 'x' + a[1]).className != 'cords') {
                            $(i + 'x' + a[1]).className = $(a[0] + 'x' + i).className = 'crosshair';
                        }
                    }
                }
            });
        };

</script>

    <script type="text/javascript" src="js/mint"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="menu">
            <ul>
                <li id="m01"><a href="http://Y.cloudapp.net">Home</a></li>
                <li id="m02"><a href="http://Y.cloudapp.net/v.aspx">Draw</a></li>
                <li id="m03"><a href="Gallery.aspx">Gallery</a></li>
                <li id="m04"><a href="About.aspx">About</a></li>
                <li id="m05"><a href="mailto:mars1021@163.com">Feedbacks</a></li>
            </ul>
        </div>
        <div id="header">
            <div id="logo">
                <a href="http://Y.cloudapp.net">
                    <img src="images/out.gif" style="border: none; width: 230px" />
                </a>
            </div>
            <center>
                <table id="mytable" border="1" cellspacing="1" cellpadding="3">
                    <tbody>
                        <tr>
                            <td id="000" bgcolor="#000000" align="middle">
                                </b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>S</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>T</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>I</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>C</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>K</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b></b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>L</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>O</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>V</b>
                            </td>
                            <td id="000" class="cords" bgcolor="#cccccc" align="middle">
                                <b>E</b>
                            </td>
                        </tr>
                        <tr>
                            <td class="cords" bgcolor="#cccccc" align="middle">
                                G
                            </td>
                            <td id="1x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[0] %>">ζ</a>
                            </td>
                            <td id="2x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[1] %>">ζ</a>
                            </td>
                            <td id="3x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[2] %>">ζ</a>
                            </td>
                            <td id="4x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[3] %>">ζ</a>
                            </td>
                            <td id="5x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[4] %>">ζ</a>
                            </td>
                            <td id="6x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[5] %>">ζ</a>
                            </td>
                            <td id="7x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[6] %>">ζ</a>
                            </td>
                            <td id="8x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[7] %>">ζ</a>
                            </td>
                            <td id="9x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[8] %>">ζ</a>
                            </td>
                            <td id="10x1" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[9] %>">ζ</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="cords" bgcolor="#cccccc" align="middle">
                                A
                            </td>
                            <td id="1x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[10] %>">ζ</a>
                            </td>
                            <td id="2x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[11] %>">ζ</a>
                            </td>
                            <td id="3x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[12] %>">ζ</a>
                            </td>
                            <td id="4x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[13] %>">ζ</a>
                            </td>
                            <td id="5x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[14] %>">ζ</a>
                            </td>
                            <td id="6x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[15] %>">ζ</a>
                            </td>
                            <td id="7x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[16] %>">ζ</a>
                            </td>
                            <td id="8x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[17] %>">ζ</a>
                            </td>
                            <td id="9x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[18] %>">ζ</a>
                            </td>
                            <td id="10x2" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[19] %>">ζ</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="cords" bgcolor="#cccccc" align="middle">
                                L
                            </td>
                            <td id="1x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[20] %>">ζ</a>
                            </td>
                            <td id="2x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[21] %>">ζ</a>
                            </td>
                            <td id="3x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[22] %>">ζ</a>
                            </td>
                            <td id="4x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[23] %>">ζ</a>
                            </td>
                            <td id="5x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[24] %>">ζ</a>
                            </td>
                            <td id="6x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[25] %>">ζ</a>
                            </td>
                            <td id="7x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[26] %>">ζ</a>
                            </td>
                            <td id="8x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[27] %>">ζ</a>
                            </td>
                            <td id="9x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[28] %>">ζ</a>
                            </td>
                            <td id="10x3" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[29] %>">ζ</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="cords" bgcolor="#cccccc" align="middle">
                                L
                            </td>
                            <td id="1x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[30] %>">ζ</a>
                            </td>
                            <td id="2x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[31] %>">ζ</a>
                            </td>
                            <td id="3x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[32] %>">ζ</a>
                            </td>
                            <td id="4x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[33] %>">ζ</a>
                            </td>
                            <td id="5x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[34] %>">ζ</a>
                            </td>
                            <td id="6x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[35] %>">ζ</a>
                            </td>
                            <td id="7x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[36] %>">ζ</a>
                            </td>
                            <td id="8x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[37] %>">ζ</a>
                            </td>
                            <td id="9x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[38] %>">ζ</a>
                            </td>
                            <td id="10x4" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[39] %>">ζ</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="cords" bgcolor="#cccccc" align="middle">
                                E
                            </td>
                            <td id="1x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[40] %>">ζ</a>
                            </td>
                            <td id="2x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[41] %>">ζ</a>
                            </td>
                            <td id="3x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[42] %>">ζ</a>
                            </td>
                            <td id="4x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[43] %>">ζ</a>
                            </td>
                            <td id="5x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[44] %>">ζ</a>
                            </td>
                            <td id="6x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[45] %>">ζ</a>
                            </td>
                            <td id="7x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[46] %>">ζ</a>
                            </td>
                            <td id="8x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[47] %>">ζ</a>
                            </td>
                            <td id="9x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[48] %>">ζ</a>
                            </td>
                            <td id="10x5" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[49] %>">ζ</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="cords" bgcolor="#cccccc" align="middle">
                                Y
                            </td>
                            <td id="1x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[50] %>">ζ</a>
                            </td>
                            <td id="2x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[50] %>">ζ</a>
                            </td>
                            <td id="3x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[52] %>">ζ</a>
                            </td>
                            <td id="4x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[53] %>">ζ</a>
                            </td>
                            <td id="5x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[54] %>">ζ</a>
                            </td>
                            <td id="6x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[55] %>">ζ</a>
                            </td>
                            <td id="7x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[56] %>">ζ</a>
                            </td>
                            <td id="8x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[57] %>">ζ</a>
                            </td>
                            <td id="9x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[58] %>">ζ</a>
                            </td>
                            <td id="10x6" class="crosshair" bgcolor="#ffffcc" align="middle">
                                <a target="_blank" href="v.aspx?d=<%=  listSD[59] %>">ζ</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </center>
            <div class="clear">
            </div>
        </div>
        <div id="middle">
        </div>
        <div id="middle2">
        </div>
        <div id="content">
            <div id="left">
                <h2>
                    Stick Love Gallery</h2>
                <p>
                    This page is designed to show the newest 60 stick drawings&nbsp; of the whole sites.</p>
                <p>
                    We put them on the 6 X 10 table above.</p>
                <p>
                    Just pick anyone of them and enjoy it!</p>
                <p>
                    &nbsp;</p>
                <p>
                    &nbsp;</p>
                <p>
                    &nbsp;</p>
            </div>
            <div id="right">
                <h2>
                   Sponsors</h2>

                <script type="text/javascript"><!--
                    google_ad_client = "pub-7209270908790708";
                    /* 250x250, 创建于 09-4-23 */
                    google_ad_slot = "2509280722";
                    google_ad_width = 250;
                    google_ad_height = 250;
//-->
                </script>

                <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>

            </div>
            <div class="clear">
            </div>
        </div>
        <div id="footer">
            <p>
                Copyright <a href="http://Y.cloudapp.net">Stick Love</a> all rights reserved. |
                <a href="#">Terms of use</a><p>
        </div>
    </div>
    </form>

    <script type="text/javascript" src="http://js.tongji.cn.yahoo.com/1067747/ystat.js"></script>

</body>
</html>
